import { useState } from "react";
import MyDialog from "./MyDialog";

type DialogConfig = {
  title: string;
  content: JSX.Element;
  onConfirm: () => void;
};

type UDResult = [JSX.Element, () => void, () => void];

export default function useDialog({
  title,
  content,
  onConfirm,
}: DialogConfig): UDResult {
  const [showPopup, setShowPopup] = useState(false);

  const openDialog = () => setShowPopup(true);
  const closeDialog = () => setShowPopup(false);

  return [
    <>
      {showPopup && (
        <MyDialog closer={closeDialog} title={title} onConfirm={onConfirm}>
          {content}
        </MyDialog>
      )}
    </>,
<<<<<<< HEAD

=======
    
>>>>>>> dev-rollup
    openDialog,
    closeDialog,
  ];
}
